<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/templates/templateLayout.xhtml">


	<f:metadata>
		<f:viewParam name="idPropiedad" value="#{alquilerBean.idPropiedad}" />
		<f:viewParam name="id" value="#{alquilerBean.id}" />
		<f:event type="preRenderView" listener="#{alquilerBean.inicio()}" />
	</f:metadata>

	<ui:define name="centerContent">
		<h:panelGroup layout="block"
			class="title ui-widget-header ui-corner-all"
			style="padding: 8px; font-size: 16px !important; text-align: center;">
			<h:outputText value="#{msgs['form.alquiler.modificar']}" rendered="#{!empty alquilerBean.entity.id}"/>
			<h:outputText value="#{msgs['form.alquiler.alta']}" rendered="#{empty alquilerBean.entity.id}"/>
			

			<h:form id="create">

				<p:panel id="panelCreate">
					<p:growl globalOnly="true" id="msgGrowl" sticky="true" showSummary="true" showDetail="true" />
					
					<p:panelGrid style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="5">Propiedad</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column>
								<h:outputLabel for="direccion"
									value="#{msgs['form.direccion']}: " />
							</p:column>
							<p:column>
								<h:outputLabel id="direccion" size="50"
									value="#{alquilerBean.entity.propiedad.direccion}" />
							</p:column>
							<p:column>
								<h:outputLabel for="numero" value="#{msgs['form.numero']}: " />
								<h:outputLabel id="numero"
									value="#{alquilerBean.entity.propiedad.numero}" />

							</p:column>
							<p:column>
								<h:outputLabel for="depto" value="#{msgs['form.depto']}: " />
								<h:outputLabel id="depto"
									value="#{alquilerBean.entity.propiedad.dpto}" />
							</p:column>
							<p:column>
								<h:outputLabel for="piso" value="#{msgs['form.piso']}: " />
								<h:outputLabel id="piso"
									value="#{alquilerBean.entity.propiedad.piso}" />

							</p:column>
						</p:row>
						<p:row>
							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.provincia']}: #{alquilerBean.entity.propiedad.barrio.ciudad.provincia.descripcion}" />
							</p:column>

							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.ciudad']}: #{alquilerBean.entity.propiedad.barrio.ciudad.descripcion}" />
							</p:column>

							<p:column colspan="1">
								<h:outputLabel
									value="#{msgs['form.barrio']}: #{alquilerBean.entity.propiedad.barrio.descripcion}" />
							</p:column>

							<p:column colspan="2">
								<h:outputLabel
									value="#{msgs['form.zona']}: #{alquilerBean.entity.propiedad.barrio.zona}" />

							</p:column>
						</p:row>

						<f:facet name="footer">
							<p:row>
								<p:column colspan="5">
									<p:commandButton value="Buscar Propiedad #{msgs.obligatorio}" immediate="true"
										action="/pages/propiedad/search?faces-redirect=true"
										rendered="#{empty alquilerBean.idPropiedad and empty alquilerBean.id}"
										ajax="false">
										<f:param name="idPropiedad" value="#{item.id}" />
									</p:commandButton>
								</p:column>
							</p:row>
						</f:facet>
					</p:panelGrid>

					<p:spacer height="20px" />


					<p:panelGrid id="panelFechaInquilino"
						style="width: 100%;text-align:left">
						<f:facet name="header">
							<p:row>
								<p:column colspan="4">Datos</p:column>
							</p:row>
						</f:facet>
						<p:row>
							<p:column style="width: 20%;">
								<h:outputLabel for="comboInquilino"
									value="#{msgs['form.inquilino']}#{msgs.obligatorio}" />
							</p:column>
							<p:column style="width: 80%;" colspan="2">
								<p:autoComplete id="comboInquilino" size="100"
									value="#{alquilerBean.entity.inquilino}"
									completeMethod="#{alquilerBean.inquilinos}" var="prop"
									itemLabel="#{prop.apellidoNombre()}" itemValue="#{prop}"
									converter="#{inquilinoConvert}" forceSelection="true">
									<p:column>  
						               Dni: #{prop.dni}
						            </p:column>
									<p:column>  
						                #{prop.mail}
						            </p:column>
									<p:column>  
						                #{prop.apellido}, #{prop.nombre}  
						            </p:column>
								</p:autoComplete>
								<p:message for="comboInquilino" />
							</p:column>
						</p:row>
						<p:row>
							<p:column style="width: 20%;">
								<h:outputLabel for="garanteComb"
									value="#{msgs['garante']}#{msgs.obligatorio}" />
							</p:column>
							<p:column style="width: 80%;" colspan="2">
								<p:autoComplete id="garanteComb" size="100"
									value="#{alquilerBean.entity.garante}"
									completeMethod="#{alquilerBean.garantes}" var="prop"
									itemLabel="#{prop.apellidoNombre()}" itemValue="#{prop}"
									converter="#{garanteConvert}" forceSelection="true">
									<p:column>  
						               Dni: #{prop.dni}
						            </p:column>
									<p:column>  
						                #{prop.mail}
						            </p:column>
									<p:column>  
						                #{prop.apellido}, #{prop.nombre}  
						            </p:column>
								</p:autoComplete>
								<p:message for="garanteComb" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel for="fechaInicio"
									value="#{msgs['form.fecini']}#{msgs.obligatorio}" />
							</p:column>
							<p:column>
								<p:calendar id="fechaInicio"
									value="#{alquilerBean.entity.fechaInicio}" locale="es"
									pattern="dd/MM/yyyy" />
								<p:message for="fechaInicio" />
							</p:column>
							<p:column>
								<h:outputLabel value="#{msgs['propio']}: " />
								<p:selectBooleanCheckbox value="#{alquilerBean.entity.contratoPropio}" />  
							</p:column>
						</p:row>
					</p:panelGrid>


					<p:spacer height="20px" />

					<p:dataTable id="tablaPeriodos" var="periodo"
						value="#{alquilerBean.entity.periodos}"
						editable="#{empty alquilerBean.entity.id}" editMode="cell"
						widgetVar="carsTable" emptyMessage="Agregue Periodos">
						<f:facet name="header">  
				            Periodos Alquiler #{msgs.obligatorio}  
				    	</f:facet>
						<p:column headerText="Nro" style="width:10%">
							<h:outputText value="#{periodo.nroPeriodo}" />
						</p:column>
						<p:column headerText="Meses" style="width:40%">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{periodo.periodo}" />
								</f:facet>
								<f:facet name="input">
									<p:selectOneMenu value="#{periodo.periodo}"
										style="width:95%;text-align:left">
										<f:selectItems value="#{utilsBean.meses}" />
										<f:ajax event="change" render="tablaPeriodos" />
									</p:selectOneMenu>

								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Monto" style="width:40%">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{periodo.monto}">
										<f:convertNumber currencySymbol="$" type="currency"
											maxFractionDigits="0" />
									</h:outputText>
								</f:facet>
								<f:facet name="input">
									<pe:inputNumber value="#{periodo.monto}" required="true"
										emptyValue="0" style="width:95%;text-align:right">
										<f:ajax event="change" render="tablaPeriodos" />
									</pe:inputNumber>
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column style="width:20%"
							rendered="#{empty alquilerBean.entity.id}">
							<p:commandButton value="Eliminar" process="@this"
								action="#{alquilerBean.entity.removePeriodo(periodo)}"
								update="tablaPeriodos" />
						</p:column>
						<f:facet name="footer">
							<p:commandButton value="#{msgs['btn.agregarpediodo']}"
								process="@this" action="#{alquilerBean.agregarPediodo()}"
								update="tablaPeriodos"
								rendered="#{empty alquilerBean.entity.id}" />
						</f:facet>
					</p:dataTable>

					<f:facet name="footer">
						<ui:include src="/templates/toolbarCreate.xhtml">
							<ui:param name="bean" value="#{alquilerBean}" />
						</ui:include>
					</f:facet>
				</p:panel>

			</h:form>
		</h:panelGroup>
	</ui:define>

</ui:composition>
</html>
